Create dynamic drop-down list option with JavaScript and jQuery

Hi friends, Today we will learn how can you Create dynamic drop-down list option with JavaScript and jQuery. 
often, we need to create this when we do any projects there we mostly use JavaScript or jQuery for creating Html Tag or When we create Forms.

So let's start.


Dynamic drop-down list option with JavaScript

 Step -1  First we will create button and div.

Button - After clicking the button drop-down will create.
Div  -    Where drop-down will appear inside the Div tag



<button id ='drop_down'>Create Drop Down List</button>

\<br><br><br>

<div id="show_dropDown"></div>



JavaScript Code with Array Data
  1. If we have data in an array then first we will store it in a variable.
  2. Get the id of Button using document.getElementById("Id here")
  3. Fire on click event on the button click.
  4. Create a select tag and add attribute name for it.
  5. Iterate loop of the array which we want to show in the dropdown list.
  6. Create an option tag.
  7. Add attribute value and assign the value of the array.
  8. Add attribute text and assign the value for array.
  9. Add option tag in the select tag.
  10. Get the id of div tag where we want to show a drop-down list.
  11. Append the select drop-down list on that div.

 

 document.getElementById('drop_down').onclick = function (){                                                                           

    var arr = ['Ram','Zack','Mohan','Stevis'];


    var select_drop_down =  document.createElement('select');


        select_drop_down.name = "dropdown";


    for(var i=0;i<arr.length;i++ ){


      var  option  = document.createElement('option');


        option.value = i;


        option.text = arr[i];


        select_drop_down.add(option);


        var show_dropDown = document.getElementById('show_dropDown');


        show_dropDown.appendChild(select_drop_down);


    }

 }




Output -                                Video

JavaScript Code with Object Data


 document.getElementById('drop_down').onclick = function (){

    var obj = {

        Name: "Zack", class: "10th", Address: "California"

     };


    var select_drop_down =  document.createElement('select');


        select_drop_down.name = "dropdown";


  Object.keys(obj).forEach(key => {


        var  option  = document.createElement('option');


        option.value = key;


        option.text = obj[key];


        select_drop_down.add(option);


        var show_dropDown = document.getElementById('show_dropDown');


        show_dropDown.appendChild(select_drop_down);

    });

  }


Output -                                 Video


Dynamic drop-down list option with JQuery

Note - make sure you include the jquery library inside the head section 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>


Step -1   First we will create button and div.

Button - After clicking the button drop-down will create.
Div  -     Where drop-down will appear inside the Div tag



<button id ='drop_down'>Create Drop Down List</button>

\<br><br><br>

<div id="show_dropDown"></div >



JQuery Code with Array Data

  1. If we have data in an array then first we will store it in a variable.
  2. Get the id of Button.
  3. Fire on click event on the button click.
  4. Create a select tag and add attribute name for it.
  5. Iterate loop of the array which we want to show in the dropdown list.
  6. Create an option tag.
  7. Add attribute value and assign the value of the array.
  8. Add attribute text and assign the value for array.
  9. Add dropdown html  inside div tag using Id
  10. close the select tag.

  

  var arr = ['Ram','Zack','Mohan','Stevis'];

  var drop_down_html = '';


  $(document).ready(function () {


     $("#drop_down").on("click",function () { 


        drop_down_html += "<select name='dropdown'>" +

                      "<option val=''>Select Name</option>";

     $.each(arr, function (index, value) {

     drop_down_html += "<option value='"+index+"'>"+value+</option>";


        $("#show_dropDown").html(drop_down_html);


      });


         drop_down_html += "</select>";

    });


  });


Output -                                  Video                      

JQuery Code with Object Data



    var drop_down_html ='';

    var obj = {


        Name: "Zack", class: "10th", Address: "California"


    };


$("#drop_down").on("click",function () { 

   drop_down_html += "<select name='dropdown'>" +

                    "<option val=''>Select Name</option>";


  $.each(obj, function (index, value) {

    drop_down_html += "<option value='"+index+"'>"+value+</option>";

      $("#show_dropDown").html(drop_down_html);

  });


         drop_down_html += "</select>";

 });


Output -                                Video


Yeah! You have learned ЁЯШК

I hope you understood and like this article. if you like it so, please give feedback in the comment section.
Tags

Short Tutorials

Post a Comment

Please do not enter any spam link in the comment section.

Post a Comment

Please do not enter any spam link in the comment section.

Previous Post Next Post